<template>
  <Modal v-model="visibel" :title="`${title}`" @on-ok="ok" @on-cancel="cancel" >
    <Form :model="editForm" :label-width="120" :rules="ruleValidate" ref="formValidate">
      <Form-item label="名称" prop="dictLabel">
        <Input type="text" v-model="editForm.dictLabel" placeholder="请输入名称" clearable style="width: 200px" />
      </Form-item>
      <Form-item label="字典值" prop="dictValue">
        <Input type="text" v-model="editForm.dictValue" placeholder="请输入字典值" clearable style="width: 200px" />
      </Form-item>
      <Form-item label="排序" prop="dictSort" class="ivu-form-item-required">
        <Input type="text" v-model="editForm.dictSort" placeholder="请输入排序" clearable style="width: 200px" />
      </Form-item>
    </Form>
    <div slot="footer">
      <Button @click="ok" type="primary" :loading="loading">确认</Button>
      <Button @click="cancel" >取消</Button>
    </div>
  </Modal>
</template>

<script>
import { getDictByKey } from "@/libs/dictStorage";
const gradeDictData = getDictByKey("memberGrade");
import { editDictData } from '@/api/dict.js'
  const validateNumberCheck = (rule, value, callback) => {
      if (value === undefined || value === null || value === '') {
          callback(new Error('请输入排序!'));
      }else if (value && !/^\d+$/.test(value)) {
          callback(new Error('请输入数字!'));
      }else {
          callback();
      }
  };

export default {
  data() {
    return {
      title: '',
      visibel: false,
      loading: false,
      editForm: {},
      gradeArrays: gradeDictData,
      ruleValidate: {
        dictLabel: [{ required: true, message: "请输入名称!", trigger: "blur" }],
        dictValue: [{ required: true, message: "请输入字典值!", trigger: "blur" }],
        dictSort: [
          // { required: true, message: "请输入排序!", trigger: "blur" },
          { validator: validateNumberCheck, trigger: 'blur' }
        ],
      },
    };
  },
  methods: {
    add(record = {}) {
      this.title = '新增';
      this.editForm = { ...record };
      this.visibel = true;
    },
    edit(record) {
      this.title = '编辑';
      this.editForm = { ...record };
      this.visibel = true;
    },
    cancel() {
      this.loading = false
      this.visibel = false;
      this.$refs.formValidate.resetFields()
    },
    ok() {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          this.loading = true
          editDictData(this.editForm).then((res) => {
            if (res.success) {
              this.$Message.success("修改成功！");
              this.$emit("success");
              this.cancel()
            } else {
            }
          }).finally(()=>{
            // this.loading = false
          });
        } else {
        }
      });
    },
  },
};
</script>

<style></style>
